tags: Vue.js ItIron2020

前言

昨天我們利用了一個簡單的計算機專案複習了目前為止所學的東西，在繼續往下介紹vue之前，今天要臨時插入一個小工具的介紹 - vue-devtool，善用vue-devtool可以幫助你檢查每個vue實體中的狀態，讓你更清楚發生了什麼事情!
馬上就開始吧，別擔心! 今天的內容相對簡短很多的!

到底什麼是vue-devtool?

vue-devtool是個用於檢視vue專案的一個chrome套件，我們可以輕鬆的利用它查看每個組件間的資料，未來接觸到vuex時也同樣可以利用vue-devtool查看目前集中管理的資料，在很多時候都可以協助你進行除錯! 是個相當方便的小工具!

Getting Started

首先請先造訪該套件的頁面並予以安裝，這個套件在偵測到目前頁面是vue專案時會自動啟動，這時候我們需要一個實際的vue專案做示範!
麻煩請先在你的終端機輸入以下的指令，將我之前寫的vue-calculator拉到你的本地電腦。

git clone https://github.com/windate3411/vue-calculator.git

接著進入專案資料夾

cd vue-calculator

並安裝相依的套件

npm i

安裝完成後，輸入以下指令並到http://localhost:8080/ 就可以在本地瀏覽昨天的計算機專案囉!

npm run serve

打開該頁面後，請打開你的console，你應該會看到以下的畫面

注意一下右上方的紅圈處，這表示套件正在順利運行中!

使用vue-devtool觀察組件間的資料

接著請你點開devtool右側的下拉選單，你應該會看到一個Vue的選項

打開選單後，你就會看到目前專案的結構，在這個示範專案中APP組件下有一個Calculator組件，也就是我們這次的計算機專案，請點擊它，你應該會看到這樣的畫面。

接著我們馬上來看一下裡面有什麼內容吧!

在右側的導覽版中，你目前只有看到一個data屬性，裡面有著我們用在專案data屬性中的所有變數，請你隨意點擊按鈕，觀察在導覽頁面中，組件資料的變化。
下方的圖檔示範的是current的變化，請特別注意右側的值。

還記得在專案中我們是利用current來顯示最終的計算結果嗎? 我們每一次點擊數字或是運算時都會影響到current的值，而這些變化也會同步反應在vue-devtool中，你不需要像以往一樣console.log印出每一個想知道的數值，只要用vue-devtool就可以輕鬆的查看囉!

結語

今天的內容相當相當簡略，長度是以往文章的一半? 主要是跟各位介紹這個小工具的基本應用，未來你在打造本地的vue專案時，它會是你debug的好幫手的! 明天開始我們會繼續介紹vue中的屬性，負擔又會開始比較大一些! 大家加油吧!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D